<template>
    <div class="app-container">
        <div class="top">
            <div class="one">
                <div>日期：
                    <el-date-picker
                       v-model="dateTime"
                       type="date"
                       size="small"
                       value-format="yyyy-MM-dd"
                       @change="onChangeDate"
                       :picker-options="pickerOptions"
                       :editable="false"
                       placeholder="请选择日期">
                     </el-date-picker>
                     <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 10px;" @click="handleQueryDate">搜索</el-button>
                     <el-button icon="el-icon-refresh" size="mini" @click="resetQueryDate">重置</el-button>
                </div>
                <div ref="oneChart" class="oneCharts"> </div>
                <div class="title">全区幼儿入园率：{{ ryl }}%</div>
            </div>
            <div class="two">
                <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px">
                    <el-form-item label="园所名称：" prop="name">
                      <el-select v-model="queryParams.name" @clear="setValueNull" clearable filterable placeholder="请选择园所名称">
                          <el-option
                            v-for="item in schoolList"
                            :key="item.code"
                            :label="item.title"
                            :value="item.code">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <!-- <el-form-item label="日期：" prop="name" >
                        <el-date-picker
                          v-model="queryParams.time"
                          value-format="yyyy-MM-dd"
                          type="date"
                          size="small"
                          placeholder="选择日期">
                        </el-date-picker>
                      </el-form-item> -->
                      <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                     <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                      </el-form-item>
                </el-form>
                <div ref="twoChart" class="twoCharts"> </div>
            </div>
        </div>
        <div class="bottom">
            <div ref="threeChart" class="threeCharts"></div>
        </div>
    </div>
</template>
<script>
import { attendanceRecord,proList,schoolList,trendList } from "@/api/qu/qyyerygk";
import moment from "moment";
 export default {
   name: "ysgyxx",
   data() {
     return {
       dateTime:new Date(),
       pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
            },
       open:false,
       school:{
         name:'张三',age:'5',sex:'男',class:'小二班',father:'张一',mother:'王五',medicalHistory:'关于病史的信息'
       },
       schoolList:[],
       enterGardenChart:null,
       qsChart:null,
       qsChartList:[],
       sevenlist:[],
       proList:[],
       rateChart:null,
       ryl:'',
       queryParams:{
        name:'',
       }
     }
   },
   created() {
      this.getList()
      this.getproList();
      this.getschoolList();
      this.getTrendList()
   },
   mounted(){
     this.enterGardenChart = this.$echarts.init(this.$refs.oneChart);
     this.qsChart = this.$echarts.init(this.$refs.twoChart);
    //  this.twochartsFun()
     this.rateChart = this.$echarts.init(this.$refs.threeChart);
    //  this.threechartsFun()
   },
   methods: {
   async getList(){
      try {
        const obj ={
          inTime:moment(this.dateTime).format("YYYYMMDD")
        }
        const data = await  attendanceRecord(obj);
        //value1:item.attendancePro0
         data.rows.map(item=>{
          this.qsChartList=[{name:'已入园幼儿人数',value:item.attendance0,ratio:item.attendancePro0},
                             {name:'未入园幼儿人数',value:item.attendance1,ratio:item.attendancePro1},
                             {name:'请假幼儿人数',value:item.attendance2,ratio:item.attendancePro2},
                     ];
          this.ryl=item.attendancePro

        });
        this.onechartsFun()
      } catch (error) {
        console.log(error);
      }
    },
    //获取学校列表
    async getschoolList(){
     const data = await schoolList();
     this.schoolList=data.rows;
    },
    //获取七日出勤趋势
   async getTrendList(){
       const obj ={
        schoolCode:this.queryParams.name,
       }
      const data=  await trendList(obj);
      this.sevenlist=data.rows.map(item=>{
        return {
          name:item.inTime,
          value1:item.attendance1, //未入园
          value2:item.attendance3, //未入园
          value3:item.attendance4, //未入园
        }
      })
      this.twochartsFun();
    },
    //入园率排行
    async getproList(){
       try {
        const obj ={
          inTime:moment(this.dateTime).format("YYYYMMDD")
        }
        const data= await proList(obj);
        this.proList=  data.rows.map(item=>{
           return{
            name:item.schoolName,
            value:item.attendancePro
           }
        })
        this.threechartsFun();
       } catch (error) {
          console.log(error);
       }
    },
    //选择日期
    onChangeDate(val){
      if(!val){
        this.handleQueryDate()
      }
    },
    handleQueryDate(){
      this.getList();
      this.getproList();
    },
    //清空按钮
    setValueNull(){
      this.getTrendList()
    },
    //园所名称搜索
    handleQuery(){
      this.getTrendList()
    },
    //one图
    onechartsFun(){
      const option = {
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
              // console.log(params);
             return params.name+':'+params.value+'，占比:'+params.data.ratio+'%';
           },
        },
        title: {
             text: '全区幼儿出勤情况统计',
             left: 'left',
             subtext: '单位：人',
             subtextStyle:{
              color:'#000'
             }
           },
         legend: {
           type: 'scroll',
           orient: 'vertical',
           right: 0,
           top: 20,
           bottom: 20,
         },
         grid: {
          top:'1',
          left: "1%",
          right: "0%",
          bottom: "1%",
        //   containLabel: true,
        },
         series: [
           {
             name: '幼儿入园情况',
             type: 'pie',
             radius: ['40%', '70%'],
             avoidLabelOverlap: false,
             itemStyle: {
               borderRadius: 10,
               borderColor: '#fff',
               borderWidth: 2
             },
             label: {
              show: true,
              position: 'outer',//设置文字的所在的位置
              formatter: function (params) {
                // console.log(params);
                return params.name+':'+params.value+'，占比:'+params.data.ratio+'%';
              },
            },
             data: this.qsChartList
           }
         ]
       };
       this.enterGardenChart.setOption(option);
       window.addEventListener("resize", this.monitorResize);
    },
    //two图
    twochartsFun(){
     const  option = {
         title: {
           text: '园所幼儿未入园情况',
           subtext:"单位：人",
           subtextStyle:{
            color:'#000'
           }
         },
         tooltip: {
           trigger: 'axis'
         },
         legend: {
          right: 50,
           data: ['未入园幼儿人数', '病假幼儿人数', '事假幼儿人数', ]
         },
         grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           containLabel: true
         },
        //  toolbox: {
        //    feature: {
        //      saveAsImage: {}
        //    }
        //  },
         xAxis: {
           type: 'category',
           boundaryGap: true,
           data: this.sevenlist.map(item=>item.name)
         },
         yAxis: {
           type: 'value'
         },
         series: [
           {
             name: '未入园幼儿人数',
             type: 'line',
             data:this.sevenlist.map(item=>item.value1)
           },
           {
             name: '病假幼儿人数',
             type: 'line',
             data: this.sevenlist.map(item=>item.value2)
           },
           {
             name: '事假幼儿人数',
             type: 'line',
             data: this.sevenlist.map(item=>item.value3)
           },
         ]
       };
       this.qsChart.setOption(option);
       window.addEventListener("resize", this.monitorResize);
    },
    //3图
    threechartsFun(){
      const  option = {
           title: {
             text: '园所入园率统计',
            //  subtext: '纯属虚构',
             left: 'left'
           },
           tooltip: {
             trigger: 'item',
             formatter: function (params) {
              // console.log(params);
             return params.name+':'+params.value+'%';
           },
           },
           legend: {
             type: 'scroll',
             orient: 'vertical',
             right: '20%',
             top: 20,
             bottom: 20,

           },
           grid: {

           left: '1%',
           right: '4%',
           bottom: '1%',
           containLabel: true
         },
           series: [
             {
               name: '',
               type: 'pie',
               radius: '75%',
               center: ['40%', '50%'],
               data:this.proList,
               emphasis: {
                 itemStyle: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(0, 0, 0, 0.5)'
                 }
               }
             }
             ]
          };
          this.rateChart.setOption(option);
          window.addEventListener("resize", this.monitorResize);
    },
     //地图监听窗口缩放事件
     monitorResize(){
       this.enterGardenChart.resize();
       this.qsChart.resize();
       this.rateChart.resize();
     },
     resetQueryDate(){
        this.dateTime = new Date()
        this.handleQueryDate()
     },
     resetQuery(){
        this.queryParams = {}
        this.handleQuery()
     },
   }
 };
</script>
<style lang="scss" scoped>
.title{
    font-weight: 700;
    text-align: center;
}
.top{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 450px;
    // border: 1px red solid;
    margin:10px 10px 30px 10px;
    .one{
        width: 45%;
        height: 100%;
        // border: 1px rgb(0, 255, 76) solid;
        // background-color: rgb(255, 255, 255);
        // border: 1px solid #9CD2FF;
        // border-radius: 4px;
        padding: 20px;
        .oneCharts{
            margin-top: 30px;
            width: 100%;
            height: 80%;
        }
    }
    .two{
        width: 45%;
        height: 100%;
        padding: 20px;
    //     background-color: rgb(255, 255, 255);
    //  border: 1px solid #9CD2FF;
    //   border-radius: 4px;
        // border: 1px rgb(68, 0, 255) solid;
       .twoCharts{
            margin-top: 30px;
            width: 100%;
            height: 75%;
        }
    }
}
.bottom{
    width: 100%;
    height: 550px;
    padding: 20px;
    // background-color: rgb(255, 255, 255);
    //  border: 1px solid #9CD2FF;
    //   border-radius: 4px;
    margin:10px 10px 0px 10px;
    .threeCharts{
            width: 100%;
            height: 100%;
        }
}
</style>
